<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>Google Visualization API Sample</title>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

    google.load('visualization', '1', {packages: ['geomap']});

    var geomap = null;

    var data = null;

    var options = null;

    var hidemap = null;

    function drawVisualization() {

     

        data = new google.visualization.DataTable();

        data.addRows(50);

        data.addColumn('string', 'State');

        data.addColumn('number', 'Value');

        data.setValue(0,0, 'Alabama');

        data.setValue(1,0, 'Alaska');

        data.setValue(2,0, 'Arizona');

        data.setValue(3,0, 'Arkansas');

        data.setValue(4,0, 'California');

        data.setValue(5,0, 'Colorado');

        data.setValue(6,0, 'Connecticut');

        data.setValue(7,0, 'Delaware');

        data.setValue(8,0, 'Florida');

        data.setValue(9,0,'Georgia');

        data.setValue(10,0,'Hawaii');

        data.setValue(11,0,'Idaho');

        data.setValue(12,0,'Illinois');

        data.setValue(13,0,'Indiana');

        data.setValue(14,0,'Iowa');

        data.setValue(15,0,'Kansas');

        data.setValue(16,0,'Kentucky');

        data.setValue(17,0,'Louisiana');

        data.setValue(18,0,'Maine');

        data.setValue(19,0,'Maryland');

        data.setValue(20,0,'Massachusetts');

        data.setValue(21,0,'Michigan');

        data.setValue(22,0,'Minnesota');

        data.setValue(23,0,'Mississippi');

        data.setValue(24,0,'Missouri');

        data.setValue(25,0,'Montana');

        data.setValue(26,0,'Nebraska');

        data.setValue(27,0,'Nevada');

        data.setValue(28,0,'New Hampshire');

        data.setValue(29,0,'New Jersey');

        data.setValue(30,0,'New Mexico');

        data.setValue(31,0,'New York');

        data.setValue(32,0,'North Carolina');

        data.setValue(33,0,'North Dakota');

        data.setValue(34,0,'Ohio');

        data.setValue(35,0,'Oklahoma');

        data.setValue(36,0,'Oregon');

        data.setValue(37,0,'Pennsylvania');

        data.setValue(38,0,'Rhode Island');

        data.setValue(39,0,'South Carolina');

        data.setValue(40,0,'South Dakota');

        data.setValue(41,0,'Tennessee');

        data.setValue(42,0,'Texas');

        data.setValue(43,0,'Utah');

        data.setValue(44,0,'Vermont');

        data.setValue(45,0,'Virginia');

        data.setValue(46,0,'Washington');

        data.setValue(47,0,'West Virginia');

        data.setValue(48,0,'Wisconsin');

        data.setValue(49,0,'Wyoming');

        for (var i = 0; i < 50; i++) {

            data.setValue(i,1,0);

        }

        options = {};

        options['region'] = 'US';

        options['showLegend'] = false;

        options['color'] = [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]

        geomap = new google.visualization.GeoMap(document.getElementById('visualization'));

        hidemap = new google.visualization.GeoMap(document.getElementById('hide'));

        

        geomap.draw(data, options);

        google.visualization.events.addListener(geomap, 'select', selectHandler);

        google.visualization.events.addListener(hidemap, 'select', selectHandler_hide);

}

    function selectHandler_hide() {

        

        var selection = hidemap.getSelection();

     if (data.getValue(selection[0].row,1)==1)

        {

          data.setValue(selection[0].row,1,0);

        }else

          data.setValue(selection[0].row,1,1);

        

        //data.setValue(selection[0].row,1,1);

        //alert("hide_Selected! Now do some other stuff.");

        geomap.draw(data,options);

        setTimeout('hide()',700);

    }

    function selectHandler() {

        var selection = geomap.getSelection();

if (data.getValue(selection[0].row,1)==1)

        {

          data.setValue(selection[0].row,1,0);

        }else

          data.setValue(selection[0].row,1,1);

        

        //data.setValue(selection[0].row,1,1);

        //alert("geo_Selected! Now do some other stuff.");

        hidemap.draw(data,options);

        

        setTimeout('hide()',700);

    }

    function hide(){

        var old = document.getElementById('visualization'); 

        var obj = document.getElementById('hide');

        if(old.style.visibility == "visible"){

            old.style.visibility = "hidden";

            obj.style.visibility = "visible";

        } 

        else {  

            obj.style.visibility = "hidden";

            old.style.visibility = "visible";

        }

    }

    google.setOnLoadCallback(drawVisualization);

    </script>

</head>

<body style="font-family: Arial;border: 0 none;">

    <div id="visualization" style="position:absolute ;width: 600px; height: 600px;visibility:visible">

    </div>

   <div id="hide" style="position:absolute; width: 600px; height: 600px; visibility:hidden">   

   </div>

   <form style="position:relative">

<input type=button onClick="hide()" value="update"/>

</form> 

</body>

</html> 